<template>
    <div class="login">
        <div class="login-box">
            <h3>登录</h3>
            <van-cell-group>
                <van-field v-model="userInfo.username" type="text" label="账号：" placeholder="请输入账号" />
            </van-cell-group>
            <van-cell-group>
                <van-field v-model="userInfo.password" type="password" label="密码：" placeholder="请输入密码" />
            </van-cell-group>
            <div class="info-item btn-box">
                <van-button
                    type="info"
                    @click="submit"
                    :disabled="banLogin"
                    :loading="banLogin"
                    loading-text="登录中..."
                    style="width: 90%;"
                >登录</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import $axios from '@/assets/js/$axios.js';
    import { chgCookie } from '@/assets/js/cookieOpt.js';
    
    export default {
        data() {
            return {
                banLogin: false,
                userInfo: {
                    username: '',
                    password: ''
                }
            }
        },
        created() {
        },
        methods: {
            submit() {
                this.banLogin = true;

                $axios.post2('/complain_test/api/oauth/token', { // '/devApi/api/oauth/token' // 'http://175.24.191.81:8888/complain_test/api/oauth/token'
                    grant_type: 'password',
                    client_id: 'mobile-client',
                    client_secret: 'mobile',
                    ...this.userInfo
                }).then(res => {
                    this.banLogin = false;
                    // console.log('res', res);

                    if (res.code === 200) {
                        chgCookie('token', res.data.access_token, 12 * 60 * 60 );
                        this.$router.push({ name: 'home' });
                    }
                }).catch(err => {
                    this.banLogin = false;
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .login {
        width: 100vw;
        height: 100vh;
        background: url(../../public/img/login.webp) no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .login-box {
        border: .02rem #dbd4d4 solid;
        
        h3 {
            font-size: .4rem;
            text-align: center;
            line-height: .8rem;
        }
        
        .btn-box {
            margin: .14rem 0;
            display: flex;
            justify-content: center;
        }
    
        .van-cell-group {
            background-color: unset;
        }
        .van-cell {
            background-color: unset;
        }
    }
</style>
